<script setup lang="ts">
import { ref } from "vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue';
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import {getNavBarHeight} from "@/utils/navBarHeight";
const showPopup = ref<boolean>(false);
const activeIndex = ref<number>(0);
const minPrice = ref("");
const maxPrice = ref("");
const priceList = ref([
  {
    label: "不限",
    value: "all",
  },
  {
    label: "0-500元",
    value: "0",
  },
  {
    label: "500-1000元",
    value: "500",
  },
  {
    label: "1000元以上",
    value: "1000",
  },
])

const handleClick = (index: number) => {
  activeIndex.value = index;
}

const emit = defineEmits(["getData"])
const getData = () => {
  // 使用对象映射替代条件判断链
  const priceRanges: Record<number, any> = {
    1: { start: "0", end: "500" },
    2: { start: "500", end: "1000" },
    3: { start: "1000", end: "" }
  }
  // 通过解构获取预设值，默认空字符串
  const { start: defaultStart = "", end: defaultEnd = "" } =
  priceRanges[activeIndex.value] || {}
  // 优先使用自定义输入值
  const priceStart = defaultStart
  const priceEnd = defaultEnd
  minPrice.value = priceStart
  maxPrice.value = priceEnd
  emit("getData", priceStart, priceEnd)
  showPopup.value = false;
}

defineExpose({
  minPrice,
  maxPrice,
})
</script>

<template>
  <view>
    <view class="tip-text" @click="showPopup = true">
      <span class="">{{priceList[activeIndex].label}}</span>
      <TnIcon name="down-triangle" :size="40" color="#666666" />
    </view>
    <view>
      <TnPopup v-model="showPopup" bg-color="transparent" radius="0" open-direction="top" :safe-area-inset-bottom="false">
        <view class="type-box" :style="{ paddingTop: getNavBarHeight() - 40 + 'px' }">
          <view class="title">价格区间</view>
          <view class="item-content">
            <view class="item-content-item" v-for="(item, index) in priceList" :key="index" :class="{'active': activeIndex === index}" @click="handleClick(index)">
              <view>{{item.label}}</view>
              <view class="icon-box" v-if="activeIndex === index">
                <TnIcon name="success" bold :size="40" />
              </view>
            </view>
          </view>
          <view class="footer">
<!--            <view class="text">-->
<!--              自定义-->
<!--            </view>-->
<!--            <view>-->
<!--              <TnInput type="number" placeholder="最低价" height="33px" v-model="minPrice"></TnInput>-->
<!--            </view>-->
<!--            <view class="h-line">-->
<!--              - -->
<!--            </view>-->
<!--            <view>-->
<!--              <TnInput type="number" placeholder="最高价" height="33px" v-model="maxPrice"></TnInput>-->
<!--            </view>-->
            <view class="btn" @click="getData">
              确定
            </view>
          </view>
        </view>
      </TnPopup>
    </view>
  </view>
</template>

<style scoped lang="scss">
.tip-text {
  display: flex;
  align-items: center;
  padding: 2px 3px 2px 8px;
  border-radius: 3px;
  color: #666666;
  background: #f5f5f5;
}
.type-box {
  background: #ffffff;
  padding-top: 30px;
  .title {
    font-size: 16px;
    color: #1D2129;
    width: 100%;
    text-align: center;
    padding-top: 10px;
  }
  .item-content {
    height: 220px;
    width: 100%;
    padding: 0 18px;
    .item-content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      text-align: left;
      color: #333333;
      font-size: 16px;
      border-bottom: 1px solid #F2F2F2;
    }
    .active {
      .icon-box {
        color: #165DFF;
      }
    }
  }
  .footer {
    height: 90px;
    padding: 18px;
    display: flex;
    align-items: center;
    .text {
      font-size: 14px;
      color: #333333;
      min-width: 50px;
    }
    .h-line {
      padding: 0 10px;
    }
    .btn {
      background: #165DFF;
      color: #ffffff;
      width: 124px;
      height: 33px;
      line-height: 33px;
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      min-width: 124px;
      margin-left: 25px;
    }
  }

}
.tn-number-box__operation-btn {
  opacity: 0 !important;
}
.blue-text {
  color: #165DFF;
}
</style>